<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/main.css}">
    <link rel="stylesheet" th:href="@{/static/css/pagination.css}">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        table tbody tr:nth-child(odd) {
            background: #F4F4F4;
        }

        table tbody td:nth-child(even) {
            color: #C00;
        }
    </style>
</head>

<body>

<div th:insert="head :: copy"></div>
<div th:insert="SideNav.html :: copy"></div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
        </div>
        <div class="panel-body">
            <form th:action="@{/admin/pageInfo}" method="post" class="form-inline" role="form" style="float:left;">
                <div class="form-group has-feedback">
                    <div class="input-group">
                        <div class="input-group-addon">查询条件</div>
                        <input class="form-control has-success" name="keyword" type="text" placeholder="请输入查询条件">
                    </div>
                </div>
                <button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
            </form>
            <button type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i
                    class=" glyphicon glyphicon-remove"></i> 删除
            </button>
            <a th:href="@{/admin/addAdmin}" class="btn btn-primary" style="float:right;"
                ><i class="glyphicon glyphicon-plus"></i> 新增
            </a>
            <br>
            <hr style="clear:both;">
            <div class="table-responsive">
                <table class="table  table-bordered">
                    <thead>
                    <tr>
                        <th width="30">#</th>
                        <th width="30"><input type="checkbox"></th>
                        <th>账号</th>
                        <th>名称</th>
                        <th>邮箱地址</th>
                        <th width="100">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="list:${pageInfo.list}">
                        <td th:text="${list.id}">1</td>
                        <td><input type="checkbox"></td>
                        <td th:text="${list.loginAcct}">Lorem</td>
                        <td th:text="${list.userName}">ipsum</td>
                        <td th:text="${list.email}">dolor</td>
                        <td>
                            <a th:href="@{/assignRole/page(id=${list.id},pageNum=${pageInfo.list.pageNum},keyword=${param.keyword})}" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></a>
                            <a th:href="@{/admin/edit(id=${list.id},pageNum=${pageInfo.list.pageNum})}"  class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></a>
                            <a th:href="@{/admin/remove(id=${list.id},pageNum=${pageInfo.list.pageNum},keyword=${param.keyword})}" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></a>
                        </td>

                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="6" align="center">
                            <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
</div>
</div>

<script th:src="@{/static/js/jquery-2.1.1.min.js}"></script>
<script th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/static/script/docs.min.js}"></script>
<script th:src="@{/static/js/jquery.pagination.js}"></script>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
    });
    $("tbody .btn-success").click(function () {
        window.location.href = "assignRole.html";
    });
    $("tbody .btn-primary").click(function () {
        window.location.href = "edit.html";
    });
</script>
<script>

    $(function () {
        initPage();
    });

    function initPage() {
        var properties = {
            num_edge_entries: 2,
            num_display_entries: 5,
            callback: pageSelect,
            items_per_page: [[${pageInfo.pageSize}]],
            current_page: [[${pageInfo.pageNum - 1}]],
            prev_text: "上一页",
            next_text: "下一页"


        };
        $("#Pagination").pagination([[${pageInfo.total}]], properties);

    }

    function pageSelect(pageIndex, jQuery) {
        var pageNum = pageIndex + 1;
        window.location.href = "../admin/pageInfo?pageNum=" + pageNum + "&keyword=[[${param.keyword}]]";
        return false;
    }
</script>
</body>
</html>
